<template>
	<view class="all-comment">
		<custom-nav-bar title="评论" bg="white" showBack />
		<view class="comments">
			<view class="comment" v-for="item of comtList" :key="item.name">
				<comment :item="item"/>
			</view>
		</view>
		<uni-load-more iconType="circle" :status="status"/>
		<view :style="{height:bottomSafeArea()+'px'}"></view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onReachBottom} from '@dcloudio/uni-app';
import { bottomSafeArea } from '../../utils/system';


// 触底加载，添加第几页数据
let pageNum = 0;

// 一页几条数据
const pageSize = 10;

// 是否还有数据
const noData = ref(false);

// 底部加载提示状态
const status = ref('more')

// 创建虚拟数据
const arr = Array.from({ length: 100 }, (e, i) => {
	let img = '';
	if (i < 10 || i > 90) {
		img = '/static/logo.png';
	}
	return {
		name: `jntm${i}`,
		icon: `/static/images/food1.jpg`,
		time: `2025-4-${i}`,
		comment: `这个好好吃+${i + 1}`,
		img
	};
});

// 显示的评论
const comtList = ref([])

// 触底加载
onReachBottom(() => {
	
	status.value = 'loading'
	setTimeout(()=>{
		getData()
	},600)
});

// 获取数据
const getData = ()=>{
	const arr1 = arr.filter((e,i)=>i>=(pageNum*pageSize)&&i<(pageNum*pageSize+pageSize))
	// console.log(arr1.length);
	if(!arr1.length){
		status.value = 'noMore'
		return
	}
	status.value = 'more'
	comtList.value.push(...arr1)
	pageNum++
}
getData()



</script>
<style scoped lang="scss">
.all-comment {
	min-height: 100vh;
	box-sizing: border-box;
	background: #f6f6f6;

	.comments {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
}
</style>
<style></style>
